<template>
  <div class="page-city">
    <van-nav-bar :title="title">
      <template #left>
        <van-icon name="cross" size="32" color="green" @click="$router.back()" />
      </template>
    </van-nav-bar>

    <van-search placeholder="请输入搜索关键词" />

    <div class="container">
      <van-index-bar :index-list="cityStore.indexList">
        <template v-for="item in cityStore.cityGroups" :key="item.groupName">
          <van-index-anchor :index="item.groupName" />
          <van-cell
            v-for="city in item.groupList"
            :key="city.cityId"
            :title="city.name"
            @click="onClick(city)"
          />
        </template>
      </van-index-bar>
    </div>
  </div>
</template>

<script lang="ts" setup>
/**
 * useRoute()     =>  this.$route
 * useRouter()    =>  this.$router
 */
import { useRouter } from 'vue-router'
import { useCityStore } from '@/stores/city'

const router = useRouter()
const cityStore = useCityStore()

// 获取城市列表数据
cityStore.getCities()

const title = computed(() => `当前城市 - ${cityStore.curCity.name}`)

function onClick(city: ICity) {
  // 修改仓库数据
  cityStore.setCurCity(city)
  // 跳转路由
  // this.$router.push()
  // router.push({ name: 'films' })
  router.back()
}

onActivated(() => {
  console.log('City组件被缓存')
})
</script>

<style scoped>
.page-city {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.container {
  flex: 1;
  overflow-y: auto;
}
</style>
